<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
    <meta name="author" content="Bootlab">

    <title> demo_客户_资产_应收账款</title>

    <link href="css/classic.css" rel="stylesheet">
    <link href="css/ext.css" rel="stylesheet">



</head>

<body>
    <div class="wrapper">

        <nav class="sidebar">
            <div class="sidebar-content ">
                <a class="sidebar-brand" href="index.html">
                    <i class="align-middle" data-feather="command"></i>
                    <span class="align-middle">供应链金融平台</span>
                </a>

                <ul id='sidebar-menu' class="sidebar-nav">
                    <script id="script_menu" type="text/x-handlebars-template">

                        {{#each menuitems}}
                            <li class="sidebar-header">
                                {{title}}
                            </li>
                            {{#if groups}}
                                {{#each groups}}
                                    <li class="sidebar-item" {{#if ../actived }} active {{/if}}>

                                        <a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
                                            <i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
                                        </a>

                                        {{#if items}}
                                            <ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
                                                {{#each items}}

                                                    <li class="sidebar-item {{#if actived}} active {{/if}}">
                                                        <a class="sidebar-link " href={{href}}>{{title}}</a>
                                                    </li>
                                                {{/each}}
                                            </ul>
                                        {{/if}}
                                    </li>
                                {{/each}}
                            {{/if}}
                        {{/each}}
                    </script>
                </ul>

                <div class="sidebar-bottom d-none d-lg-block">
                    <div class="media">
                        <img class="rounded-circle mr-3" src="img/avatar.jpg" alt="Chris Wood" width="40" height="40">
                        <div class="media-body">
                            <h5 class="mb-1 text-white">Chris Wood</h5>
                            <div class="text-light">
                                <i class="fas fa-circle text-success"></i> Online
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </nav>

        <div class="main">
            <nav class="navbar navbar-expand navbar-light bg-white">
                <a class="sidebar-toggle d-flex mr-2">
                    <i class="hamburger align-self-center"></i>
                </a>

                <form class="form-inline d-none d-sm-inline-block">
                    <input class="form-control form-control-no-border mr-sm-2" type="text" placeholder="Search projects..." aria-label="Search">
                </form>


                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
                                <div class="position-relative">
                                    <i class="align-middle" data-feather="message-circle"></i>
                                    <span class="indicator">4</span>
                                </div>
                            </a>
                            <div id="messages" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="messagesDropdown">
                                <script id="script_messages" type="text/x-handlebars-template">
                                    <div class="dropdown-menu-header">
									<div class="position-relative">
											{{total}}  New Messages
									</div>
								</div>
								<div class="list-group">
									{{#each items}}
									<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">

												<img src="{{avatar}}" class="avatar img-fluid rounded-circle" alt="{{who}}">
											</div>
											<div class="col-10 pl-2">
												<div class="text-dark">{{who}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
								 	{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all messages</a>
								</div>
								</script>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
                                <div class="position-relative">
                                    <i class="align-middle" data-feather="bell-off"></i>
                                </div>
                            </a>
                            <div id="alerts" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0" aria-labelledby="alertsDropdown">
                                <script id="script_alerts" type="text/x-handlebars-template">
                                    <div class="dropdown-menu-header">
									{{total}} New Notifications
								</div>
								<div class="list-group">
									{{#each items}}
										<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">
													<i class="text-danger" data-feather="alert-circle"></i>
											</div>
											<div class="col-10">
												<div class="text-dark">{{title}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
									{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all notifications</a>
								</div>
								</script>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
                                <span class="d-inline-block d-md-none">
                                    <i class="align-middle" data-feather="settings"></i>
                                </span>
                                <span class="d-none d-sm-inline-block">
                                    <img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1" alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
                                </span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i>
                                    Profile</a>
                                <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i> Analytics</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Settings & Privacy</a>
                                <a class="dropdown-item" href="#">Help</a>
                                <a class="dropdown-item" href="#">Sign out</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            <main class="content">
                <div class="container-fluid p-0">
                    <div class="row">
                        <div class="col-md-12 col-xl-12">
                            <div class="card">
                                <div class="card-header">

                                    <h5 class="card-title mb-0">查询</h5>
                                </div>
                                <div class="card-body">
                                    <form>
                                        <div class="form-row">
                                            <div class="form-group col-md-4">
                                                <label for="inputFirstName">项目编号</label>
                                                <input type="text" class="form-control" id="inputFirstName" disabled placeholder="项目1">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="inputLastName">协议编号</label>
                                                <input type="text" class="form-control" id="inputLastName" disabled placeholder="协议1">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="inputLastName">融资人</label>
                                                <input type="text" class="form-control" id="inputLastName" placeholder="融资人">
                                            </div>
                                        </div>

                                        <div class="form-row">


                                            <div class="form-group col-md-4">
                                                <label class="form-label">日期选择</label>
                                                <input class="form-control" type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
                                            </div>


                                        </div>
                                        <button type="submit" class="btn btn-primary">查询</button>
                                    </form>
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function(event) {
                                            // Select2
                                            $('.select2').each(function() {
                                                $(this)
                                                    .wrap('<div class="position-relative"></div>')
                                                    .select2({
                                                        placeholder: 'Select value',
                                                        dropdownParent: $(this).parent()
                                                    });
                                            })
                                            // Daterangepicker
                                            $('input[name="daterange"]').daterangepicker({
                                                opens: 'left'
                                            });
                                            $('input[name="datetimes"]').daterangepicker({
                                                timePicker: true,
                                                opens: 'left',
                                                startDate: moment().startOf('hour'),
                                                endDate: moment().startOf('hour').add(32, 'hour'),
                                                locale: {
                                                    format: 'M/DD hh:mm A'
                                                }
                                            });
                                            $('input[name="datesingle"]').daterangepicker({
                                                singleDatePicker: true,
                                                showDropdowns: true
                                            });
                                            var start = moment().subtract(29, 'days');
                                            var end = moment();

                                            function cb(start, end) {
                                                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                                            }
                                            $('#reportrange').daterangepicker({
                                                startDate: start,
                                                endDate: end,
                                                ranges: {
                                                    'Today': [moment(), moment()],
                                                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                                                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                                                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                                                }
                                            }, cb);
                                            cb(start, end);
                                        });
                                    </script>

                                </div>
                            </div>
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">回款信息</h5>
                                </div>
                                <div class="card-body">
                                    <table class="table" id='table-repay'>
                                        <thead>
                                            <tr>
                                                <th style="width:10%">回款流水号</th>
                                                <th style="width:10%">回款金额</th>
                                                <th style="width:10%">已处理金额</th>
                                                <th style="width:20%">已处理金额比例</th>
                                                <th style="width:12%">回款推送日期</th>
                                                <th style="width:10%">单据数</th>
                                                <th style="width:14%">回款待处理状态</th>
                                                <th>详情</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {

                                            // 定义的数组,根据数组,渲染生成页面内容
                                            var arr = [
                                                ['HK000001', 2000000, 400000, '20%', '2020-01-01', 11, '待处理', ''],
                                                ['HK000002', 1813000, 500000, '27%', '2020-01-01', 12, '待处理', ''],
                                                ['HK000003', 1800000, 1800000, '100%', '2020-01-01', 3, '正常', ''],
                                                ['HK000004', 1800000, 1800000, '100%', '2020-01-01', 3, '正常', ''],
                                                ['HK000005', 1800000, 1800000, '100%', '2020-01-01', 3, '正常', ''],
                                                ['HK000006', 1800000, 1800000, '100%', '2020-01-01', 3, '正常', ''],
                                                ['HK000007', 1800000, 1800000, '100%', '2020-01-01', 3, '异常', '']
                                            ];

                                            // 定义变量,存储要写入的内容
                                            $('#table-repay').DataTable({
                                                data: arr,
                                                "order": [
                                                    [4, "desc"]
                                                ],
                                                columns: [{
                                                        // title: 回款流水号
                                                    },
                                                    {
                                                        // title: 回款金额
                                                    },
                                                    {
                                                        // title: "回款已处理金额"
                                                    },
                                                    {

                                                        render: function(data, type, row, meta) {

                                                            return type === 'display' ?
                                                                `<div class="progress progress-sm shadow-sm mb-1" > <div class="progress-bar bg-primary" role="progressbar" style="width: ${data}">${data}
																	</div></div > ` : ''
                                                        }

                                                    },
                                                    {
                                                        // 回款日期
                                                    },
                                                    {
                                                        // title:关联单据数

                                                    },
                                                    {
                                                        // 			// 回款待处理状态

                                                    },



                                                    {
                                                        title: "详情",
                                                        render: function(data, type, row, meta) {

                                                            html_content = `<td>    <a href="#"><i class="fas fa-eye text-primary"></i></a></td >`
                                                            return html_content

                                                        }
                                                    }
                                                ]
                                            });

                                        });
                                    </script>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            </main>

            <footer class="footer">
                <div class="container-fluid">
                    <div class="row text-muted">
                        <div class="col-6 text-left">
                            <ul class="list-inline">
                                <li class="list-inline-item">
                                    <a class="text-muted" href="#">Support</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="text-muted" href="#">Help Center</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="text-muted" href="#">Privacy</a>
                                </li>
                                <li class="list-inline-item">
                                    <a class="text-muted" href="#">Terms of Service</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-6 text-right">
                            <p class="mb-0">
                                &copy; 2018 - <a href="index.html" class="text-muted">AppStack</a>
                            </p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>


    </div>
    <script src="js/app.js"></script>
    <script src="js/initDataTables.js"></script>
    <script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>
    <script src="js/initMenuMessageAlert.js"></script>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {

            initSidebarMenu(2, 1, 0)

            var tpl_siderbar = $("#script_menu").html();
            var template_sdb = Handlebars.compile(tpl_siderbar);
            var content = template_sdb(menu_json_data);
            $("#sidebar-menu").html(content)

            //模版渲染
            var tpl_alerts = $("#script_alerts").html();
            var template_alt = Handlebars.compile(tpl_alerts);
            var content = template_alt(alerts);
            $("#alerts").html(content)



            //模版渲染
            var tpl_messages = $("#script_messages").html();
            var template_msg = Handlebars.compile(tpl_messages);
            var content = template_msg(messages);
            $("#messages").html(content)



        });
    </script>


    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            //获取模版里面的内容
            var tpl = $("#entry1").html();

            //模版渲染
            var template = Handlebars.compile(tpl);

            //定义数据
            var json_data_arr = [
                ['1110123123', 18123, 18123, '正常', '2020-01-01', '2020-06-01', ''],
                ['1110123124', 1813, 78, '正常', '2020-01-01', '2020-07-01', ''],
                ['1110123125', 1811, 811, '逾期', '2020-01-01', '2020-04-01', ''],
                ['1110123126', 17123, 17123, '正常', '2020-01-01', '2020-09-01', ''],
                ['1110123146', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
                ['1110123166', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
                ['1110123189', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
                ['1110123134', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
                ['1110123111', 17123, 17123, '正常', '2020-08-01', '2020-09-01', '']
            ];
            var content = template(json_data_arr);

            console.log(content)

            //模版装载到dom节点上
            $("#table-debit").html(content)
        });
    </script>





    <script>
        Handlebars.registerHelper("debug", function(optionalValue) {


            if (optionalValue) {


                console.log("==========begin==========");

                console.log(optionalValue);

                console.log("========== end ==========");

            }


        });
        Handlebars.registerHelper('ifCond', function(v1, operator, v2, options) {

            switch (operator) {
                case '==':
                    return (v1 == v2) ? options.fn(this) : options.inverse(this);
                case '===':
                    return (v1 === v2) ? options.fn(this) : options.inverse(this);
                case '!=':
                    return (v1 != v2) ? options.fn(this) : options.inverse(this);
                case '!==':
                    return (v1 !== v2) ? options.fn(this) : options.inverse(this);
                case '<':
                    return (v1 < v2) ? options.fn(this) : options.inverse(this);
                case '<=':
                    return (v1 <= v2) ? options.fn(this) : options.inverse(this);
                case '>':
                    return (v1 > v2) ? options.fn(this) : options.inverse(this);
                case '>=':
                    return (v1 >= v2) ? options.fn(this) : options.inverse(this);
                case '&&':
                    return (v1 && v2) ? options.fn(this) : options.inverse(this);
                case '||':
                    return (v1 || v2) ? options.fn(this) : options.inverse(this);
                default:
                    return options.inverse(this);
            }
        });
    </script>

</body>

</html>